<template>
    <div class="main">
        <form>
            <div class="user_view">
                <div class="inputs">
                    <i class="iconfont icon-my"></i>
                    <input type="text" v-model="form.user" placeholder="请输入账号">
                </div>
                <div class="line"></div>
            </div>
            <div class="user_view">
                <div class="inputs">
                    <i class="iconfont icon-mima1"></i>
                    <input type="password" autocomplete="off" @focus="input_focus" v-model="form.password" placeholder="请输入密码">
                </div>
                <div class="line"></div>
            </div>
            <div class="password_view"></div>
            <span class="err_msg" v-show="show_err">账号或密码有误</span>
            <button @click="submit()">登录</button>
            <span class="goto_register" @click="goto_register">没有账号,快去注册>></span>
        </form>
    </div>
</template>
<script>
import {reactive,ref,getCurrentInstance} from 'vue'
import { useRouter,useRoute} from 'vue-router'
//import { useRouter,useRoute } from 'vue-router'
export default {
    setup(){
        const { proxy } = getCurrentInstance()
        const router = useRouter()
        const form = reactive({
            user:'405792710',
            password:"jiahui.1233",
        })
        let show_err=ref(false)
        const submit=()=>{
            if((form.user&&form.user.length>=1)&&form.password&&form.password.length>=1){
                proxy.$ajax.post('login',form,(res)=>{
                    sessionStorage.setItem('user_data',JSON.stringify(res.data))
                    sessionStorage.setItem('user_token',res.data.user_token)
                    router.push('/qita')
                    console.log('我登陆了')
                })
                console.log(form)
                // proxy.$axios.post('/api/login',proxy.$qs.stringify(form),res=>{

                // })
            }else{
                show_err.value=true
            }
        }
        const input_focus=()=>{
            show_err.value=false
        }
        const goto_register=()=>{
            router.push('/register')
        }
        return {form,submit,show_err,input_focus,goto_register}
    }
}
</script>
<style lang="less" scoped>

.err_msg{
    color: red;
    margin-bottom: 20rem;
    font-size: 20rem;
}
.main{
    height: 100vh;
    width: 750rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../../assets/login.png);
    background-size: 100%;
    form{
        width: 570rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .user_view{
            width: 100%;
            .inputs{
                height: 50rem;
                align-items: center;
                display: flex;
                margin-bottom: 17rem;
                i{
                    margin-left: 30rem;
                    font-size: 40rem;
                }
                input{
                    margin-left: 18rem;
                    height: 100%;
                    width: 390rem;
                    font-size: 35rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #222222;
                    border: 0;
                    text-align: left;
                    background: rgba(0, 0, 0, 0);
                }
            }
            .line{
                width: 100%;
                background: #000;
                height: 2px;
            }
        }
        button{
            width: 570rem;
            height: 90rem;
            background: #4270ED;
            border-radius: 8rem;
            border: 0px;
            font-size: 28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
        .goto_register{
            color: #2120ff;
            margin-top:120rem;
            font-size: 26rem;
        }
    }
}
.user_view:nth-of-type(2){
            margin-top: 102rem;
            margin-bottom: 87rem;
        }
</style>